Skip to main content

CSS 선택자 우선순위

  • CSS의 순서 규칙 계단식(Cascade) 및 우선 순위(Specificity)

후자우선의 원칙​

p {
  color: red;
  font-size: 20px;
}
p {
  color: blue;
}
/* 실행하면 색깔은 blue의 크기가 20px인 결과가 나온다. */
/* CSS의 정의 */

구체성의 원칙(Specificity: 명시도)​

<p class="hello">안녕하세요.</p>
p.hello {
  color: #eee;
}
.hello {
  color: yellow;
}
p {
  color: green;
}
/* CasCade의 성질을 가지고 있어도 태그에 대하여 상세하게 작성한 CSS가 적용된다. 정답은 #eee의색 글자가 출력된다. */

가중치 순서 및 우선 순위 계산​

태그점수
inline1000
id(#)100
class(.),가상클래스,속성선택자10
타입,가상요소 선택자1
전체 선택자(*)0

가중치 문제1​

div #id1 {
  color: green;
}
p#id1 {
  color: black;
}
#id1 {
  color: blue;
}
.class {
  color: yellow;
}
<div>
  <p id="id1" class="class">1. 무슨 색</p>
  <p id="id2" class="class" style="color:red">2. 무슨 색</p>
</div>
가중치 문제1 정답
note

image

정답: 1.검정생 2. 빨간색

1번은 유형선택자와 id와 같이 작성하여 더 정밀하게 p태그를 지목하여 검정색이 나온다.
2번은 inline으로 속성을 작성하였기 때문에 p태그안에 작성된 속성값이 적용

가중치 문제2​

/* 클래스 + 유형 선택자 */
.ul a {
  color: yellow;
}
/* 클래스 선택자 */
.click {
  color: green;
  background: black;
}
/* 유형 선택자 */
html body main section article div ul li p strong span a {
  background: purple;
  color: blue;
}
<body>
  <main>
    <section>
      <article>
        <div>
          <ul class="ul">
            <li>
              <p>
                <strong>
                  <span>
                    <a href="#" class="click">
                      1. 이 글자는 어떤 색일까요? 2. 배경색은 어떤 색일까요?
                    </a>
                  </span>
                </strong>
              </p>
            </li>
          </ul>
        </div>
      </article>
    </section>
  </main>
</body>
가중치 문제2 정답
note

image

정답: 글자는 노란색, 배경은 검정색이다.
유형선택자와 같은 경우 정말 상세하게 작성하였지만 클래스선택자의 가중치가 더 높기 떄문이다.

중요성의 원칙​

  • !important: 어떤 경우 라도 항상 선택
danger

선택자 아무리 많더라도 !important를 작성하게 된다면 최고 순위가 된다.
오류와 버그가 많아서 권장하지 않음.